<script>
import { mapState } from 'vuex';
import { buildingStatus } from '@/const';
import BuildingForm from '@/views/park/building/components/buildingForm.vue';

export default {
  name: 'building',
  components: { BuildingForm },
  data() {
    return {
      //分页参数
      params: {
        name: '',
        page: 1,
        pageSize: 10,
      },
      loading: false,
      edit: false,

      dialogVisible: false,
    };
  },
  methods: {
    // 派发action获取楼宇列表回调函数
    async fetchBuildingList() {
      try {
        this.loading = true;
        await this.$store.dispatch('buildingStore/fetchBuildingListAction', this.params);
      } catch (error) {
        this.$message.error(error.message);
      } finally {
        this.loading = false;
      }
    },
    /*
    * 分页的回调函数
    * */
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.fetchBuildingList();
    },
    handleCurrentChange(page) {
      this.params.page = page;
      this.fetchBuildingList();
    },
    // 点击删除按钮的回调函数
    async handleDelete(building) {
      if (building.status === 1) return this.$message.warning('租赁中不可删除');
      const confirm = await this.$confirm(`此操作将永久删除${building.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(error => error);
      if (confirm === 'cancel') return;
      try {
        const deleteResult = await this.$store.dispatch('buildingStore/deleteBuildingAction', building.id);
        await this.fetchBuildingList();
        this.$message.success(deleteResult);
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    //点击查询按钮的回调函数
    handleSearch() {
      this.params.page = 1;
      this.fetchBuildingList();
    },
    // 点击编辑按钮回调函数
    async handleEdit(id) {
      this.edit = true;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.building.fetchBuildingDetail(id);
      });
    },
    // 点击添加按钮回调函数
    handleAdd() {
      this.edit = false;
      this.dialogVisible = true;
    },
    /*格式化楼宇状态的回调函数*/
    formatterStatus(status) {
      return buildingStatus[status];
    },

    /*点击确定按钮的回调函数*/
    async handleSubmit() {
      const validate = await this.$refs.building.$refs.formRef.validate().catch(error => error);
      if (!validate) return;
      try {
        const result = await this.$store.dispatch('buildingStore/addOrEditBuildingAction', this.$refs.building.formData);
        this.$message.success(result);
        this.dialogVisible = false;
        this.fetchBuildingList();
      } catch (error) {
        this.$message.error(error.message);
      }
    },

    /*el-dialog组件关闭时候的回调*/
    close() {
      this.$refs.building.resetFields();
    },

  },
  computed: {
    title() {
      return this.edit ? '编辑楼宇' : '添加楼宇';
    },
    ...mapState('buildingStore', ['total', 'buildingList']),
  },
  mounted() {
    this.fetchBuildingList();
  },
};
</script>

<template>
  <div class="building-container">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix" shadow="never">
        <el-form size="small" inline>
          <el-form-item label="楼宇名称:">
            <el-input placeholder="请输入楼宇名称" v-model="params.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">添加楼宇</el-button>
      </div>
      <el-table :data="buildingList" size="small" border stripe :header-cell-style="{background:'#f4f6f8',color:'#000'}" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 1)">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="楼宇名称" align="center"></el-table-column>
        <el-table-column prop="floors" label="层数" align="center"></el-table-column>
        <el-table-column prop="area" label="在管面积(m²)" align="center"></el-table-column>
        <el-table-column prop="propertyFeePrice" label="物业费(元/m²)" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{row}">
            {{ formatterStatus(row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="handleEdit(row.id)">编辑</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 20, 30, 40]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" @close="close">
      <building-form ref="building"></building-form>
      <template #footer>
        <el-button size="small">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.building-container {
  padding: 15px;
}
</style>
